@extends('admin.public.header')
@section('title','编辑等级')

@section('listcontent')
    <div class="layui-tab-content">
        
            <form class="layui-form">
                <div class="layui-form layuimini-form">
                    <input type="hidden" name="id" value="{{ $info->id ?? '' }}">
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label required">等级名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" lay-reqtext="等级名称不能为空" placeholder="请输入等级名称" value="{{ $info->name ?? '' }}" class="layui-input " >
                            <tip></tip>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">累计消费</label>
                        <div class="layui-input-block">
                            <input type="number" name="amount" lay-verify="required" lay-reqtext="累计消费不能为空" placeholder="请输入累计消费" value="{{ $info->amount ?? 0 }}" class="layui-input " >
                            <tip>用户需要消费多少金额可达到此等级</tip>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">可用折扣</label>
                        <div class="layui-input-block">
                            <input type="number" name="discount" value="{{$info->discount ?? 0 }}" class="layui-input">
                            <tip>用户达到该等级后可享受的消费折扣</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">等级图标</label>
                        <div class="layui-input-block">
                            <input name="image" lay-verify="required" placeholder="请上传图标" value="{{ $info->image ?? '' }}" class="layui-input layui-col-xs6" lay-reqtext="请上传图标">
                            <button style="display: inline-block;position: absolute;right: 0px;" type="button" class="layui-btn" id="image"><i class="layui-icon"></i>上传图标</button>
                        </div>
                        <ul class="layui-input-block layuimini-upload-show" style="margin-top: 10px;">
                            <li><a><img style="width: 50px;height:50px;object-fit: contain;" id="active_icon-images" src="{{ $info->thumb_image ?? '' }}"></a><small class="uploads-delete-tip bg-red active_icon_badge" data-upload-url="{{ $info->thumb_image ?? '' }}" data-upload-sign="|">×</small></li>
                        </ul>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">等级描述</label>
                        <div class="layui-input-block">
                            <textarea name="description" placeholder="请输入等级描述" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
                <div class="hr-line"></div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" id="saveBtn" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </form>
        
    </div>

@endsection

@section('listscript')
    <script type="text/javascript">
        layui.use(['layer','form','laydate','upload'], function () {
            var layer = layui.layer ,upload = layui.upload, form = layui.form, $=layui.jquery ,laydate = layui.laydate;
            
            form.on('submit(saveBtn)', function(data){
                var loading = layer.msg('加载中..', {icon: 16,shade: 0.3,time: false});
                $.ajax({
                    url:'/admin/user-level/edit-detail',
                    type:'post',
                    data: data.field,
                    dataType:"JSON",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success:function(res){
                        layer.close(loading);  //返回数据关闭loading
                        if(res.code == 0){
                            layer.msg(res.msg, {icon: 1},function(){
                                setTimeout('parent.location.reload()',500);
                            });
                        }
                        else{
                            layer.msg(res.msg,{icon: 2});
                        }
                    },
                    error:function(e){
                        layer.close(loading);
                        layer.msg("提交失败",{icon: 2});
                    },
                });
                return false;
            });

            var uploadInst = upload.render({
                elem: '#image'
                ,url: '/admin/upload/upload'
                ,accept: 'images' //图片
                ,acceptMime:'image/*'
                ,headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#active_icon-images').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败',{icon: 2});
                    }
                    //上传成功
                    $("input[name=image]").val(res.data);
                    return layer.msg('上传成功',{icon: 1});
                }
                ,error: function(){
                    //演示失败状态
                    return layer.msg('上传失败',{icon: 2});
                }
            });

            // 删除选中图标
            $(document).on("click", ".active_icon_badge", function(event){
                layer.confirm('确认删除？', {
                    title : "操作确认",
                    skin: 'layui-layer-molv',
                    btn: ['确认','取消'] //按钮
                }, function(){
                    $("#active_icon-images").attr('src','');
                    $("input[name=active_icon]").val('');
                    layer.msg("操作成功",{icon: 1});
                }, function(){
                    layer.msg('已取消', {icon: 1});
                });

            });
        });

    </script>
@endsection

